<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/nestable_list.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:59 GMT -->
<head>
    @include('layouts.admin.header')
    <style>
        .display_name{
            width: 300px;
            margin-left: 100px;
        }
        .display_name_desc{
            width: 400px;
            margin-left: 100px;
            color: #999999;
        }
        .del_permission{
            position: relative;
            right: -10px;
            top: -5px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-4">
            <div id="nestable-menu">
                <button type="button" data-action="expand-all" class="btn btn-white btn-sm">展开所有</button>
                <button type="button" data-action="collapse-all" class="btn btn-white btn-sm">收起所有</button>
                @permission('/permissionAdd')<a href="{{url('admin/permissionAdd')}}" class="btn btn-white btn-sm">新增权限</a>@endpermission
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>基本嵌套列表</h5>
                </div>
                <div class="ibox-content">

                    <p class="m-b-lg">
                        <strong>Nestable</strong> 支持拖动排序和触摸屏。
                    </p>

                    <div class="dd" id="nestable">
                        <ol class="dd-list">
                            @foreach($list as $item)
                                <li class="dd-item" data-id="{{$item['id']}}">
                                    <div class="dd-handle">{{$item['display_name']}}<span class="display_name">{{$item['name']}}</span> <span class="display_name_desc">{{$item['description']}}</span></div>
                                    @if(!empty($item['_child']))
                                        <ol class="dd-list">
                                            @foreach($item['_child'] as $item1)
                                            <li class="dd-item" data-id="{{$item1['id']}}">
                                                <div class="dd-handle">{{$item1['display_name']}}<span class="display_name">{{$item1['name']}}</span> <span class="display_name_desc">{{$item1['description']}}</span></div>
                                                @if(!empty($item1['_child']))
                                                    <ol class="dd-list">
                                                        @foreach($item1['_child'] as $item2)
                                                            <li class="dd-item" data-id="{{$item2['id']}}">
                                                                <div class="dd-handle">{{$item2['display_name']}}<span class="display_name">{{$item2['name']}}</span> <span class="display_name_desc">{{$item2['description']}}</span></div>
                                                            </li>
                                                        @endforeach
                                                    </ol>
                                                @endif
                                            </li>
                                            @endforeach
                                        </ol>
                                    @endif
                                </li>
                            @endforeach
                        </ol>
                    </div>
                    <div class="m-t-md" style="display: none;">
                        <h5>数据：</h5>
                    </div>
                    <textarea id="nestable-output" class="form-control"  style="display: none;"></textarea>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/plugins/nestable/jquery.nestable.js"></script>
<script>
    $(document).ready(function () {
        var updateOutput = function (e) {
            var list = e.length ? e : $(e.target), output = list.data("output");
            if (window.JSON) {
                console.log(list.nestable("serialize"));
                output.val(window.JSON.stringify(list.nestable("serialize")));
                $.ajax({
                    url:"{{url('admin/updatePermission')}}",
                    method:'POST',
                    data:{list:JSON.stringify(list.nestable("serialize"))},
                    dataType:'json',
                    success:ajaxCallback
                });
            } else {
                output.val("浏览器不支持")
            }
        };
        $("#nestable").nestable({group: 1}).on("change", updateOutput);
        updateOutput($("#nestable").data("output", $("#nestable-output")));
        $("#nestable-menu").on("click", function (e) {
            var target = $(e.target), action = target.data("action");
            if (action === "expand-all") {
                $(".dd").nestable("expandAll")
            }
            if (action === "collapse-all") {
                $(".dd").nestable("collapseAll")
            }
        })
    });
</script>
</body>
</html>
